const path = require('path')
const webpack = require('webpack')
const resolve = (dir) => path.join(__dirname, dir)
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const CompressionPlugin = require('compression-webpack-plugin') // 开启gzip压缩
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin') // 将生成的vender.dll.js注入到html
const APIHOST = process.env.APIHOST
// const px2rem = require('postcss-px2rem')
// const postcss = px2rem({
//   remUnit: 37.5 // 基准大小 baseSize，需要和rem.js中相同
// })

// 接口代理
const proxyContext = [
  '/api'
]
let _proxy = []
proxyContext.map((v,k) => {
  _proxy[v] = {
    target: APIHOST,
    secure: false,
    changeOrigin: true,
    ws: true,
    pathRewrite: {
      '^/${v}': APIHOST+ '/' + v
    }
  }
})

// 静态资源配置cdn 
let cdnUrl = './'
let cdnImgUrl = './'
if (process.env.mode === 'prod') {
  cdnUrl = '//产线cdn地址'
  cdnImgUrl = '//产线图片cdn地址'
} else if (process.env.mode === 'test') {
  cdnUrl = '//测试cdn地址'
  cdnImgUrl = '// 测试图片cdn地址'
}

module.exports = {
  publicPath: cdnUrl, // 部署应用时的根路径
  // 输出文件目录
  outputDir: 'dist',
  // eslint-loader 是否在保存的时候检查
  assetsDir: 'public', // 放置生成的静态资源(css,img,fonts)
  lintOnSave: process.env.NODE_ENV !== 'production',
  chainWebpack: (config) => {
    config.resolve.symlinks(true)
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('scss').oneOf(type)))

    config.plugins.delete('prefetch')
    // 移除 preload 插件
    config.plugins.delete('preload')
    config.optimization.minimize(true)
    // 分割代码
    config.optimization.splitChunks({
      chunks: 'all'
    })
    // 图片打包配置cdn
    config
      .module
      .rule("images")
      .test(/\.(jpg|png|gif)$/)
      .use("url-loader")
      .loader("url-loader")
      .options({
        limit:10,
        // 根据环境使用cdn或相对路径
        publicPath: cdnImgUrl
      })
      .end()

    config.resolve.alias
      .set('@', resolve('src'))
    if (process.env.NODE_ENV === 'analyz') {
      config.plugin('webpack-report')
        .use(BundleAnalyzerPlugin, [{
          analyzerMode: 'static'
        }])
    }
  },
  // configureWebpack: {
  //   optimization: {
  //     minimizer: [new UglifyPlugin({
  //       uglifyOptions: {
  //         warnings: false,
  //         compress: {
  //           drop_console: true, 
  //           drop_debugger: false,
  //           pure_funcs: ['console.log'] 
  //         }
  //       }
  //    })]
  //   },
  //   externals: {
  //     'vue': "Vue",
  //     'vue-router': 'VueRouter',
  //     'vuex': 'Vuex'
  //   },
  //   plugins: [
  //     new webpack.DefinePlugin({
  //       __APIHOST__: JSON.stringify(APIHOST),
  //     })
  //   ],
  //   resolve: {
  //     alias: {
  //       '@': path.resolve(__dirname, './src')
  //     }
  //   }
  // },
  configureWebpack: config => {
    const plugins = [
      new webpack.DefinePlugin({
        __APIHOST__: JSON.stringify(APIHOST)
      }),
      // new webpack.DllReferencePlugin({
      //   context: process.cwd(),
      //   manifest: require('./public/vendor/vendor-manifest.json')
      // }),
      // // 这个主要是将生成的vendor.dll.js文件加上hash值插入到页面中。
      // new AddAssetHtmlPlugin([{
      //   filepath: path.resolve(__dirname, './public/vendor/vendor.dll.js'),
      //   outputPath: './vendor',
      //   publicPath: './vendor',
      //   includeSourcemap: false,
      //   hash: true
      // }])
    ]
    if (process.env.NODE_ENV === 'production') {
      config.mode = 'production'
      return {
        plugins: [
          ...plugins,
          new CompressionPlugin({
            test: /\.js$|\.html$|.css/,
            threshold: 10240, // 对超过10k的数据进行压缩
            deleteOriginalAssets: false // 是否删除原文件
          })
        ],
        performance: {
          hints: 'warning',
          maxEntrypointSize: 50000000,
          // 生成文件的最大体积 整数类型（以字节为单位 300k）
          maxAssetSize: 30000000,
          // 只给出 js 文件的性能提示
          assetFilter: function (assetFilename) {
            return assetFilename.endsWith('.js')
          }
        }
      }
    } else {
      config.mode = 'development'
      return {
        plugins: [
          ...plugins
        ]
      }
    }
  },
  // vue-loader 配置项
  // https://vue-loader.vuejs.org/en/options.html
  // vueLoader: {},
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: process.env.NODE_ENV === 'production',
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      postcss: {
        // plugins: [
        //   // postcss
        // ]
      }
    },
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  },
  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译
  // 是否启用dll
  // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
  // dll: false,
  // PWA 插件相关配置
  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},
  // webpack-dev-server 相关配置
  devServer: {
    open: false, // 浏览器自动打开页面
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: {
      ..._proxy
    }, // 设置代理
    before: app => {}
  },
  // 第三方插件配置
  pluginOptions: {
    // ...
  }
}
function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, './src/assets/style/index.scss') // 需要全局导入的less
      ]
    })
}
